<template>
    <div>
        <el-container>
            <el-main>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        添加分类
                        <div class="return-style"><el-button icon="el-icon-arrow-left" @click.native="returnButton">返回</el-button></div>
                    </el-header>
                    <el-main class="info-main">
                        <el-row>
                            <el-col style="height: 100%;" :span="8" :offset="6">
                                <el-form ref="form" :rules="rules" :model="form" label-width="150px">
                                    <el-form-item label="分类名称：" prop="categoryName">
                                        <el-input class="input-width" v-model="form.categoryName"></el-input>
                                    </el-form-item>
                                    <el-form-item style="position:relative;" label="上级分类：">
                                        <el-select class="input-width" v-model="categoryParentName" placeholder="请选择分类">
 <el-option
              v-for="item in options"
              :key="item.categoryName"
              :label="item.categoryName"
              :value="item.categoryName"
            ></el-option>
                                        </el-select>
                                        <div style="position: absolute;bottom:-30px;font-size:12px;color:#999999;">不选择分类默认为顶级分类</div>
                                    </el-form-item>
                                    <el-form-item label="排序：">
                                        <el-input class="input-width" v-model="form.categorySort"></el-input>
                                    </el-form-item>
                                    <el-form-item label="是否显示：">
                                        <el-radio-group v-model="form.categoryIsShow">
                                            <el-radio label="1">是</el-radio>
                                            <el-radio label="0">否</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="是否显示在导航栏：">
                                        <el-radio-group v-model="form.categoryIsNavigation">
                                             <el-radio label="1">是</el-radio>
                                            <el-radio label="0">否</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="选择模板：">
                                        <el-select class="input-width" v-model="form.categoryTemplateId" placeholder="服装">

                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="submitForm(form)">提交</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                    </el-main>
                </el-container>
            </el-main>
        </el-container>
    </div>
</template>
<script>
 import  classifyApi  from "@/api/goods/classify";
    export default {
        data() {
            return {
                // 选择父级分类
                categoryParentName:'',
                 options: [],
                form:{
                    categoryName:'',
                    categoryParentId:'',
                    categorySort:'',
                    categoryIsShow:'',
                    categoryIsNavigation:'',
                    categoryTemplateId:'1',
                    categoryLevel:'',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入分类名称', trigger: 'blur'}
                    ],
                }
            }
        },
        methods:{
            returnButton(){
                this.$router.replace({ path: "/goods/goodsClassify" });
            },
            submitForm(formName) {
 classifyApi.getCategoryValue(this.categoryParentName).then(response => {
        console.log(response.data.data);
        // 赋值给表中
        formName.categoryParentId=response.data.data.categoryId;   
                var CategoryLevel= response.data.data.categoryLevel+1;
                 formName.categoryLevel=CategoryLevel;
                  console.log(formName);
                
                   classifyApi.insertForm(formName).then((response) => 
                     {
                        console.log(response);
                         alert(response.data.msg);
                        this.$router.push({path: "/goods/goodsClassify"});
                     }
                     )
             
              
        })

              
            },
// 查出所有分类
 getCategoryName()
{
 classifyApi.getCategoryAll().then(response => {
        console.log(response.data.data);
        this.options = response.data.data;
      });
}        },
        mounted(){

        
        this.getCategoryName();
        }
    }
</script>
<style scoped>
    .content-header{
        position: relative;
    }
    .return-style{
        position: absolute;
        right:10px;
    }
    .input-width{
        width:250px;
    }
</style>